{include file='common/_meta' /}
<body>
<div class="container">
	<div class="layui-row">
        <div class="layui-col-md12 breadcrumb">
    		<span class="layui-breadcrumb">
    			<a><cite>用户管理</cite></a>
    			<a><cite>用户列表</cite></a>
    		</span>
        </div>
    </div>

	<div class="layui-col-md12">

		<table class="layui-hide" id="initdate" lay-filter="datatable"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">

            	<button class="layui-btn layui-btn-sm" lay-event="add">添加子用户登录账号</button>

            </div>
        </script>

        <script type="text/html" id="barDemo">

            {{#  if (d.username != 'admin') {  }}

                {{#  if (d.on_off == 1) {  }}

                        <a class="layui-btn layui-btn-warm layui-btn-xs stop" lay-event="stop" title="禁用"><i class="layui-icon layui-icon-pause"></i></a>

                {{#  } else {  }}

                        <a class="layui-btn layui-btn-normal layui-btn-xs start" lay-event="start" title="启用"><i class="layui-icon layui-icon-play"></i></a>

                {{#  }  }}

                <a class="layui-btn layui-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>

            {{#  }  }}

        </script>

	</div>

</div>
{include file="common/_footer"}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
layui.use(['table', 'form', 'layer'], function() {

	var table = layui.table;
	var layer = layui.layer;
	var form  = layui.form;

    var tableIns = table.render({
        elem: '#initdate'
        ,url:'{:url('Channel/user')}'
        ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,toolbar: '#toolbarDemo'//默认工具栏
        ,defaultToolbar: []
        ,method:'get'//请求方式
        ,where: {api: 1}
        ,page:true//开启分页
        ,limit:15//每页记录数
        ,limits: [15,20,30,40,50,60,70,80,90]
        ,cols: [[
            {type:'numbers', title: '序号'}
            ,{field:'username', title: '登录名'}
            ,{field:'on_name', title: '关联', minWidth: 100}
            ,{field:'mark_up', title: '描述', minWidth: 180}
            ,{field:'on_off_', title: '是否已启用', align: 'center', minWidth: 100}
            ,{fixed:'right', title: '操作', toolbar: '#barDemo', width: 100, unresize: true}
        ]]
    });

    //监听头工具栏事件
    table.on('toolbar(datatable)', function(obj) {

        switch(obj.event) {

            case 'add':
                layer.open({
                    type: 2,
                    title: '添加子用户账户',
                    area: ['100%', '100%'],
                    content: '{:url('Channel/addUser')}'
                });
                break;
        };
    });

    //监听工具条
  	table.on('tool(datatable)', function(obj) {

        var data = obj.data;

        switch(obj.event) {

            case 'edit':
                layer.open({
                    type: 2,
                    title: '编辑渠道',
                    area: ['100%', '100%'],
                    content: '{:url('Channel/userEdit')}' + '?usid=' + data.id
                });
                break;

            case 'stop':

              	layer.confirm('确认要禁用吗？',function(index) {

              	    $.post("{:url('user/stopUser')}", {'uid':data.id,'state':'0'},function(data) {
              	        if(data == '1'){

              	            obj.tr.find('.stop').after('<a class="layui-btn layui-btn-normal layui-btn-xs start" lay-event="start" title="启用"><i class="layui-icon layui-icon-play"></i></a>');
                            obj.tr.find('.stop').remove();

                            obj.tr.find('.status-qy').after('<span class="layui-badge status-jy">已禁用</span>');
                            obj.tr.find('.status-qy').remove();

              	            layer.msg('已禁用!',{icon: 5,time:1000});
              	        }else{
              	            layer.msg('禁用失败!',{icon: 5,time:2000});
              	        }
              	    });
              	});

                break;

            case 'start':

	            layer.confirm('确认要启用吗？',function(index) {

	                $.post('{:url('user/stopUser')}', {'uid':data.id,'state':'1'}, function(data) {
	                    if(data == '1'){

	                        obj.tr.find('.start').after('<a class="layui-btn layui-btn-warm layui-btn-xs stop" lay-event="stop" title="禁用"><i class="layui-icon layui-icon-pause"></i></a>');
                            obj.tr.find('.start').remove();

                            obj.tr.find('.status-jy').after('<span class="layui-badge layui-bg-green status-qy">已启用</span>');
                            obj.tr.find('.status-jy').remove();

	                        layer.msg('已开启!', {icon: 6,time:1000});
	                    }else{
	                        layer.msg('开启失败!',{icon: 5,time:2000});
	                    }
	                });
	            });

                break;

        };

    });

    /*解决操作按钮收缩，打开tips框不生效问题 start*/
    $(document).off('mousedown', '.layui-table-grid-down').on('mousedown', '.layui-table-grid-down', function (even) {

		table._tableTrCurr = $(this).closest('td');
    });

    $(document).off('click', '.layui-table-tips-main [lay-event]').on('click', '.layui-table-tips-main [lay-event]', function (even) {

		var elem = $(this);
		var tableTrCurr = table._tableTrCurr;

		if (!tableTrCurr) {

			return;
		}

		var layerIndex = elem.closest('.layui-table-tips').attr('times');
		layer.close(layerIndex);

		table._tableTrCurr.find('[lay-event="' + elem.attr('lay-event') + '"]').first().click();
    });
    /*解决操作按钮收缩，打开tips框不生效问题 end*/

});
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>